import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as dat from 'dat.gui'
var w = window.innerWidth
var h = window.innerHeight
var scene, camera, renderer, gui, cameraParams, light, lightParams


function main() {
  init()
  setLine()
  // setLight()
  render()
}

function init() {
  // 创建场景对象Scene
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, w / h, 1, 1000)
  camera.position.x = 0
  camera.position.y = 0
  camera.position.z = 800
  camera.up.x = 0
  camera.up.y = 1
  camera.up.z = 0
  camera.lookAt({ x: 0, y: 0, z: 0 })

  renderer = new THREE.WebGLRenderer()
  renderer.setClearColor('#8edee2')
  renderer.setSize(w, h)
  document.body.appendChild(renderer.domElement)
}

function setLine() {
  var geometry = new THREE.PlaneGeometry(600, 300,40)
  new THREE.TextureLoader().load(
    '/static/sidewalk256.jpg',
    (texture) => {
      texture.wrapS = texture.wrapT =THREE.RepeatWrapping //纹理循环
      texture.repeat.x = texture.repeat.y = 5             //纹理偏移
      var material = new THREE.MeshBasicMaterial({ map:texture })
      var mesh = new THREE.Mesh(geometry, material)
      scene.add(mesh)
    },
    (xhr)=>{
      console.log('=====',xhr);
    },
    (err)=>{
      console.log('err',err);
    }
  )
 

}

function setLight() {
  light = new THREE.PointLight(0xff0, 1, 1000, 1)
  scene.add(light)
}


function changeLight() {
  light.position.set(lightParams.x, lightParams.y, lightParams.z)
  light.intensity = lightParams.intensity
  light.decay = lightParams.decay
}

function render() {

  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

main()
/** --------------------鼠标控件对象--------------------- */
let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", render); //监听鼠标、键盘事件